<template>
    <!-- 实名认证结构 -->
    <el-card class="box-card">
        <!-- 卡片头部 -->
        <template #header>
            <div class="card-header">
                <h1>实名信息</h1>
            </div>
        </template>
        <!-- 实名认证结构的提示 -->
        <div class="tip" style="color:#7f7f7f;">
            <p><el-icon>
                    <InfoFilled />
                </el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。</p>
        </div>
        <!-- 卡片身体的底部结构 -->
        <!-- 认证成功的结构 -->
        <el-descriptions v-if="userInfo.authStatus == 1" size="small" class="margin-top" :column="1" border
            style="margin:20px auto;">
            <el-descriptions-item label-align="center" :width="20">
                <template #label>
                    <div class="cell-item">
                        用户姓名
                    </div>
                </template>
                {{ userInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="20">
                <template #label>
                    <div class="cell-item">
                        证件类型
                    </div>
                </template>
                {{ userInfo.certificatesType == '10' ? '身份证' : '户口本' }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="20">
                <template #label>
                    <div class="cell-item">
                        证件号码
                    </div>
                </template>
                {{ userInfo.certificatesNo }}
            </el-descriptions-item>
        </el-descriptions>
        <!-- 未认证的结构 -->
        <el-form ref="form" :rules="rules" :model="params" v-else style="width: 60%;margin: 20px auto;" label-width="80">
            <el-form-item label="用户姓名" prop="name">
                <el-input placeholder="请输入用户姓名" v-model="params.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="certificatesType">
                <el-select v-model="params.certificatesType" style="width: 100%;" placeholder="请选择证件类型">
                    <el-option v-for="(item, index) in arrType" :key="index" :label="item.name"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certificatesNo">
                <el-input v-model="params.certificatesNo" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="上传证件" prop="certificatesUrl">
                <el-upload ref="upload" :on-remove="handleRemove" :on-preview="handlePictureCardPreview"
                    :on-success="successhandler" :on-exceed="onexceedhandler" list-type="picture-card"
                    action="/api/oss/file/fileUpload?fileHost=userAuah" :limit="1">
                    <img style="width:100%;height:100%" src="../../../assets/images/auth_example.png" alt="">
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full style="width: 100%;height: 100%;" :src="params.certificatesUrl"
                        v-if="params.certificatesUrl" alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" @click="submit">提交</el-button>
                <el-button type="primary" size="default" @click="reset">重写</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script setup lang="ts">
import { InfoFilled } from '@element-plus/icons-vue'
import { reqUserInfo, reqCertationType, reqUserCertation } from '@/api/user'
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
// 存储用户信息
let userInfo = ref<any>({})
// 存储证件类型的数据
let arrType = ref<any>([])
// 控制对话框的显示与隐藏
let dialogVisible = ref(false)
let upload = ref()
let form = ref()
// 收集用户表单认证的数据
let params = reactive({
    certificatesNo: '',
    certificatesType: '',
    certificatesUrl: '',
    name: ''
})
onMounted(() => {
    getUserInfo()
    getType()
})
// 获取用户信息的方法
const getUserInfo = async () => {
    let result = await reqUserInfo()
    if (result.code == 200) {
        userInfo.value = result.data
    }
}
// 获取证件类型的数据
const getType = async () => {
    let result = await reqCertationType()
    if (result.code == 200) {
        arrType.value = result.data
    }
}
// 超出图片数量的钩子
const onexceedhandler = () => {
    ElMessage({ type: 'error', message: '图片只能上传一张图片' })
}
// 图片上传成功的钩子
const successhandler = (response: any) => {
    // 图片上传成功清除校验结果
    form.value.clearValidate('certificatesUrl')
    // 收集上传成功图片的地址
    params.certificatesUrl = response.data
}
// 照片墙预览的钩子
const handlePictureCardPreview = () => {
    dialogVisible.value = true
}
// 照片墙删除图片的钩子
const handleRemove = () => {
    params.certificatesUrl = ''
}
// 重写按钮的回调
const reset = () => {
    // 清除文件上传列表
    upload.value.clearFiles()
    // 清空数据
    Object.assign(params, {
        certificatesNo: '',
        certificatesType: '',
        certificatesUrl: '',
        name: ''
    })

}
// 提交按钮的回调
const submit = async () => {
    // 全部表单校验通过
    await form.value.validate()
    try {
        await reqUserCertation(params)
        ElMessage({ type: 'success', message: '认证成功' })
        getUserInfo()
    } catch (error) {
        ElMessage({ type: 'error', message: '认证失败' })
    }
}
// 自定义校验规则姓名
const validatorName = (_: any, value: any, callback: any) => {
    const reg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/
    if (reg.test(value)) {
        callback()
    } else {
        callback(new Error('请输入正确的名字'))
    }
}
// 自定义校验规则证件类型
const validatorType = (_: any, value: any, callback: any) => {
    if (value == '10' || value == '20') {
        callback()
    } else {
        callback(new Error('请选择证件的类型'))
    }
}
// 自定义校验规则身份证号
const validatorNo = (_: any, value: any, callback: any) => {
    let sfz = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
    let hkb = /^\d{9}$/
    if (sfz.test(value) || hkb.test(value)) {
        callback()
    } else {
        callback(new Error('请输入正确的证件号码'))
    }
}
// 自定义校验规则照片墙
const validatorUrl = (_: any, value: any, callback: any) => {
    if (value.length) {
        callback()
    } else {
        callback(new Error('请上传证件照图片'))
    }
}
// 表单校验规则 
const rules = {
    name: [{
        required: true, validator: validatorName,
    }],
    certificatesType: [{
        required: true, validator: validatorType,
    }],
    certificatesNo: [{
        required: true, validator: validatorNo,
    }],
    certificatesUrl: [{
        required: true, validator: validatorUrl,
    }]
}

</script>

<style scoped lang="scss">
.box-card {
    .tip {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>